<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    <el-table
      :data="tableData1"
      style="width: 100%; height: 100%"
      row-key="id"
      border
      lazy
      stripe
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="code" label="权限编码" width="180" />
      <el-table-column prop="img" label="图标" width="180" >
          <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-avatar :src="scope.row.img" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" width="180">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-tag v-if="scope.row.type === 0">目录</el-tag>
            <el-tag v-if="scope.row.type === 1" type="success">菜单</el-tag>
            <el-tag v-if="scope.row.type === 2" type="info">按钮</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="菜单URl" width="180" />
      <el-table-column prop="component" label="菜单组件" width="180" />
      <el-table-column prop="orderNum" label="排序号" width="100" />
      <el-table-column prop="icon" label="状态" width="100">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-tag v-if="scope.row.statu === 1" type="success">正常</el-tag>
            <el-tag v-if="scope.row.statu === 0">禁用</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="icon" label="操作" width="180">
        <template #default="scope">
          <div
            style="display: flex; align-items: center; justify-content: center"
          >
            <el-button type="text">编辑</el-button>
            <el-divider direction="vertical" />

            <el-popconfirm title="你确定要删除吗?">
              <template #reference>
                <el-button type="text">删除</el-button>
              </template>
            </el-popconfirm>
            <!-- <el-tag class="ml-2" type="info">Tag 2</el-tag> -->
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      title="菜单信息"
      width="40%"
      :before-close="handleClose"
    >
      <el-form :model="form" label-width="120px">
        <el-form-item label="上级菜单">
          <el-select v-model="form.region" placeholder="请选择上级菜单">
            <template v-for="item in tableData1">
              <el-option :label="item.name" :value="item.id" />
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单名称">
          <el-input v-model="form.name" />
        </el-form-item>

        <el-form-item label="权限编码">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="图标">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="菜单URl">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="菜单组件">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="form.resource">
            <el-radio label="目录" />
            <el-radio label="菜单" />
            <el-radio label="按钮" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.resource">
            <el-radio label="禁用" />
            <el-radio label="正常" />
          </el-radio-group>
        </el-form-item>

        <el-form-item label="排序号">
          <el-input-number
            v-model="num"
            :min="1"
            :max="10"
            @change="handleChange"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { type } from "os";
import internal from "stream";
import { defineComponent, reactive, ref } from "vue";
import { ElMessageBox } from "element-plus";



export default defineComponent({
  name: "Menu",
  setup() {
    const num = ref(1);
    const form = reactive({
      name: "",
      region: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
    });

    const onSubmit = () => {
      console.log("submit!");
    };
    const dialogVisible = ref(false);
    const handleClose = (done: () => void) => {
      ElMessageBox.confirm("你确定要退出编辑框吗?")
        .then(() => {
          done();
        })
        .catch(() => {
          // catch error
        });
    };

    interface User {
      id: number;
      date: string;
      name: string;
      statu: any;
      type: any;
      hasChildren?: boolean;
      children?: User[];
      path?: string;
      component?:string;
      orderNum?:string;
      code?:string;
      img?:string;
    }

    const load = (
      row: User,
      treeNode: unknown,
      resolve: (date: User[]) => void
    ) => {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: "2016-05-01",
            name: "wangxiaohu",
            statu: 1,
            type: 1,
             path: "/sys/userxxx",
        component: "/sys/Menuxxx.vue",
        orderNum: "1xx1",
        code: '1s3xxx44',
        img: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
          },
          {
            id: 32,
            date: "2016-05-01",
            name: "wangxiaohu",
            statu: 1,
            type: 1,
             path: "/sys/userxxx",
        component: "/sys/Menuxxx.vue",
        orderNum: "1xx1",
        code: '1s3xxx44',
        img: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
          },
        ]);
      }, 1000);
    };

    const tableData1: User[] = [
      {
        id: 1,
        date: "2016-05-02",
        name: "wangxiaohu",
        statu: 1,
        type: 2,
         path: "/sys/userxxx",
        component: "/sys/Menuxxx.vue",
        orderNum: "1xx1",
        code: '1s3xxx44',
        img: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      {
        id: 2,
        date: "2016-05-04",
        name: "wangxiaohu",
        statu: 0,
        type: 2,
        path: "/sys/userxxx",
        component: "/sys/Menuxxx.vue",
        orderNum: "1xx1",
        code: '1s3xxx44',
        img: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      {
        id: 3,
        date: "2016-05-01",
        name: "wangxiaohu",
        hasChildren: true,
        statu: 1,
        type: 0,
        path: "/sys/userxxx",
        component: "/sys/Menuxxx.vue",
        orderNum: "1xx1",
        code: '1s3xxx44',
        img: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      {
        id: 4,
        date: "2016-05-03",
        name: "wangxiaohu",
        statu: 0,
        type: 2,
        path: "/sys/userxxx",
        component: "/sys/Menuxxx.vue",
        orderNum: "1xx1",
        code: '1s3xxx44',
        img: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
    ];

    const handleChange = (value: number) => {
      console.log(value);
    };

    return {
      tableData1,
      load,
      handleClose,
      dialogVisible,
      form,
      onSubmit,
      handleChange,
      num,
    };
  },
});
</script>



<style lang="less" scoped>
div {
  margin: 15px;
}
.el-table {
  margin: 10px 0 0 0;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>